import { get } from 'lodash'
import setting from '@/setting.js'

export default {
  namespaced: true,
  state: {
    // 主题
    list: get(setting, 'theme.list', []),
    // 现在激活的主题 这应该是一个名字 不是对象 - 强制使用深色主题
    activeName: 'dark'
  },
  getters: {
    /**
     * @description 返回当前的主题信息 不是一个名字 而是当前激活主题的所有数据
     * @param {Object} state state
     */
    activeSetting (state) {
      return state.list.find(theme => theme.name === state.activeName) || state.list.find(theme => theme.name === 'dark') || state.list[0]
    }
  },
  actions: {
    /**
     * @description 激活一个主题 - 强制使用深色主题
     * @param {String} themeValue 需要激活的主题名称
     */
    async set ({ state, commit, dispatch }, themeName) {
      // 强制使用深色主题
      state.activeName = 'dark'
      // 将 vuex 中的主题应用到 dom
      commit('dom')
      // 持久化
      await dispatch('d2admin/db/set', {
        dbName: 'sys',
        path: 'theme.activeName',
        value: state.activeName,
        user: true
      }, { root: true })
    },
    /**
     * @description 从持久化数据加载主题设置
     * @param {Object} context
     */
    async load ({ state, commit, dispatch }) {
      // 强制使用深色主题
      state.activeName = 'dark'
      // 持久化
      await dispatch('d2admin/db/set', {
        dbName: 'sys',
        path: 'theme.activeName',
        value: state.activeName,
        user: true
      }, { root: true })
      // 将 vuex 中的主题应用到 dom
      commit('dom')
    }
  },
  mutations: {
    /**
     * @description 将 vuex 中的主题应用到 dom - 强制使用深色主题
     * @param {Object} state state
     */
    dom (state) {
      // 强制应用深色主题类名
      document.body.className = `theme-dark`
      document.documentElement.className = `theme-dark`
      // 同时添加到app根元素
      const app = document.getElementById('app')
      if (app) {
        app.className = `theme-dark`
      }
    }
  }
}
